import { Routes, Route } from "react-router-dom";
import Home from "@/pages/Home";
import OcrPage from "@/pages/OcrPage";
import SettingsPage from "@/pages/SettingsPage";
import { useState } from "react";
import { AuthContext } from '@/contexts/authContext';
import NavigationSidebar from "@/components/NavigationSidebar";

// 创建简单的占位组件
function AccountPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">账户页面</h1>
      <p>这是账户页面，尚未实现完整功能。</p>
    </div>
  );
}

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <div className="flex">
      <NavigationSidebar />
      <div className="ml-16 flex-1">
        <AuthContext.Provider
          value={{ isAuthenticated, setIsAuthenticated, logout }}>

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/ocr" element={<OcrPage />} />
            <Route path="/account" element={<AccountPage />} />
            <Route path="/settings" element={<SettingsPage />} />
            <Route path="/other" element={<div className="text-center text-xl">Other Page - Coming Soon</div>} />
          </Routes>

        </AuthContext.Provider>
      </div>
    </div>
  );
}